<template>
	<view class="loginWrap" :style="{'background-color':pageBg}" style="float: left;width: 100%;min-height: 100%;">
		<!-- <image style="width: 490rpx;height: 100rpx;margin-left:161rpx;margin-top: 100rpx;" src="../../static/images/logo.png"></image> -->
		<view class="_top_text  css-theme" :class="[cueTheme]" :style="{'background-color':pageBg}">
			<text>您好，</text><br />
			<text>欢迎来到拾光记</text>
		</view>
		<form class="loginForm css-theme" :class="[cueTheme]" :model="form" ref="uForm" @submit="toIndex">
			<view class="uni-form-item_other uni-column" style="margin-top: 110rpx;">
				<input class="uni-form-item_other_input" placeholder="请输入手机号" type="number" v-model="form.phone"
					placeholder-class="pwd" name="phone" />
			</view>

			<view v-if="isShow==1" class="uni-form-item_other uni-column " style="position: relative;">
				<input class="uni-form-item_other_input" v-if="pwdType == 'password'" type="password"
					placeholder="请输入密码" autocomplete="off" placeholder-class="pwd" v-model="form.password"
					name="password" />
				<input class="uni-form-item_other_input" v-if="pwdType == 'text'" type="text" placeholder="请输入密码"
					autocomplete="off" placeholder-class="pwd" v-model="form.password" name="password" />
				<image style="height:36rpx;width:36rpx;position: absolute;right: 10rpx;top:22rpx;" @click="changeType()"
					:src="seen?openeye:nopeneye" mode="widthFix" />

			</view>

			<view class="uni-form-item_bottom uni-column css-theme" :class="[cueTheme]"
				:style="{'background-color':pageBg}">
				<radio style="transform:scale(0.7)" :checked="checkRedio" @click="checkThis"></radio>
				<text>阅读并同意<text @click="agreement(1)">《用户协议》</text>与<text @click="agreement(2)">《隐私政策》</text></text>

			</view>
			<button class="loginbtn" v-if="isShow==1" form-type="submit">登录</button>
			<button class="loginbtn" v-if="isShow==2" @click="getCode()">获取验证码</button>
			<view v-if="isShow==1" style="float: left;width: 100%;margin-bottom: 30rpx;">
				<view style="float: right;margin-right:50rpx;margin-top: -20rpx;"><text @click="register()">立即注册</text>
				</view>
				<view style="float: left;margin-left:50rpx;margin-top: -20rpx;" @click="showThis(3)">忘记密码</view>
			</view>
			<!-- <view style="position:absolute;font-weight:bolder;bottom:0px;width: 90%;float: left;margin-left: 5%;margin-top:20rpx;color: black;text-align: center;font-size: 22rpx;margin-bottom: 20rpx;">
				<a href="https://beian.miit.gov.cn/" style="font-weight:bolder;line-height: 60rpx;color: black;text-decoration-line: none;">皖ICP备2021006064号-1</a>
			</view> -->
		</form>

		<!-- 其他登录方式 -->
		<view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
			<view class="tn-padding-sm tn-margin-xs" @click="login_weixin()">
				<view
					class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-green tn-color-white">
					<view class="tn-icon-wechat-fill"></view>
				</view>
			</view>
			<!-- <view class="tn-padding-sm tn-margin-xs">
		    <view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
		      <view class="tn-icon-sina"></view>
		    </view>
		  </view> -->
			<view class="tn-padding-sm tn-margin-xs" @click="login_qq()">
				<view
					class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
					<view class="tn-icon-qq"></view>
				</view>
			</view>
		</view>

		<tn-popup v-model="show_popup_center" :closeBtn="false" mode="center" width="550rpx" :borderRadius="20"
			:zIndex="10" :maskCloseable="false" :backgroundColor="pageBg">
			<view class="container">
				<view class="row">
					<view style="width: 100%;text-align: center;font-size: 18px;line-height: 24px;font-weight: bolder;">
						用户协议与隐私条款</view>
					<view style="width: 100%;line-height: 24px;margin-top: 10px;">
						欢迎您使用拾光记！<br />
						请仔细阅读<text style="color: #18B998;" @click="agreement(1)">《用户协议》</text>与<text
							style="color: #18B998;" @click="agreement(2)">《隐私政策》</text>
						我们将按照您同意的条款使用您的个人信息。
						<text>
							如您同意此政策，请点击“同意”并开始使用我们的产品和服务，我们尽全力保护您的个人信息安全。
						</text>
					</view>
					<view class="category-item">
						<view class="save_btn" style="background-color: #ccc;" @click="goExit()">不同意</view>
						<view class="save_btn" style="margin-left: 30rpx;" @click="goSuccess()">同意</view>
					</view>
				</view>
			</view>
		</tn-popup>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				show_popup_center: true,
				form: {
					phone: '',
					password: '',
					lx: ''
				},
				value: '',
				pwdType: 'password', // 密码类型
				openeye: ('/static/images/show.png'), //图片地址
				nopeneye: ('/static/images/eye_shutdown.png'), //图片地址
				seen: 'nopeneye',
				kf_phone: '',
				ICP: '',
				company_name: '',
				isShow: 1,
				forgetPwd: 0,
				checkRedio: false,
			}
		},
		onLoad(options) {
			_self = this
			_self.lx = options.lx
		},
		onShow() {
			uni.getStorage({
				key: 'user',
				success: function(res) {
					if (res.data) {
						console.log(res.data)
						uni.switchTab({
							url: '/pages/index/index',
						});

					}
				},
				fail: function(e) {

				}
			})
		},
		methods: {
			goExit() {
				if (uni.getSystemInfoSync().platform === 'ios') {
					plus.runtime.launchApplication({
						action: 'QUIT'
					});
				} else {
					plus.runtime.quit();
				}
			},
			goSuccess(){
				this.show_popup_center = false
			},
			//QQ登录
			login_qq() {
				let _this = this;
				uni.login({
					provider: 'qq',
					success: function(loginRes) {
						// 获取用户信息
						uni.getUserInfo({
							provider: 'qq',
							success: function(infoRes) {
								_this.other_login(loginRes, infoRes, 'qq')
							}
						});
					}
				});
			},
			//微信登录
			login_weixin() {
				let _this = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								_this.other_login(loginRes, infoRes, 'wx');
							}
						});
					}
				});
			},
			//授权登录
			other_login(loginRes, infoRes, type) {
				let _this = this;
				let url;
				let pram = {};
				console.log(loginRes)
				console.log(infoRes)
				console.log(type)
				// _this.loginRes=JSON.stringify(loginRes).toString();
				// _this.infoRes=JSON.stringify(infoRes).toString();
				switch (type) {
					case 'qq':
						url = '/token/sys/login-qq';
						pram = {
							'openId': loginRes.authResult.openid,
							'name': infoRes.userInfo.nickname,
							'sex': infoRes.userInfo.gender == '男' ? 0 : 1,
							//'province': infoRes.userInfo.province,
							//'city': infoRes.userInfo.city,
							'avatar': infoRes.userInfo.figureurl_qq,
							'unionId': infoRes.userInfo.unionid
						}
						break;
					case 'wx':
						url = '/token/sys/login-wechat';
						pram = {
							'openId': loginRes.authResult.openid,
							'name': infoRes.userInfo.nickName,
							'sex': infoRes.userInfo.gender == '男' ? 0 : 1,
							// 'province': infoRes.userInfo.province,
							// 'city': infoRes.userInfo.city,
							// 'country': infoRes.userInfo.country,
							'avatar': infoRes.userInfo.avatarUrl,
							'unionId': loginRes.authResult.unionid
						}
						break;
					default:
				}
				console.log("=======下面需要修改==========")


				var uri = getApp().globalData.url + 'modules/serviceUser/wxLogin';

				uni.request({
					url: uri,
					data: pram,
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success(res) {
						var resData = res.data;
						if (resData.code == "200") {
							/* 
							 本地数据缓存，缓存用户登录信息
							 */
							uni.setStorage({
								key: 'user',
								data: resData.data,
								success: function() {}
							});
							console.log("login success!")
							console.log(resData.data)
							// #ifdef APP-PLUS

							// uni.getPushClientId({
							// 	success: (res) => {
							// 		let push_clientid = res.cid
							// 		console.log('客户端推送标识cid:', push_clientid)
							// 		_this.updateCid(push_clientid, resData.data.id)
							// 	},
							// 	fail(err) {
							// 		console.log(err)
							// 	}
							// })
							// #endif
							uni.switchTab({
								url: '/pages/index/index',
							});


						} else {
							//消息提示框
							uni.showToast({
								title: resData.msg,
								duration: 2000,
								icon: "none"
							});
							return false;
						}
					},
					fail: (res) => {
						uni.showToast({
							title: res.errMsg,
							duration: 2000,
							icon: "none"
						});
					}
				})

				// uni.request({
				// 	url: _this.websiteUrl + url,
				// 	data: pram,
				// 	method: 'POST',
				// 	header: {
				// 		'Content-Type': 'application/x-www-form-urlencoded',
				// 	},
				// 	success: (res) => {
				// 		console.log(res)
				// 		if (res.data.code == 200) {
				// 			//_this.testData=JSON.stringify(res.data.data).toString();;


				// 			// console.log(res.data)
				// 			// _this.login(true, res.data.data, function() {
				// 			// 	_this.getRongyToken();
				// 			// });

				// 		}
				// 	}
				// });

			},

			agreement(type) {
				uni.navigateTo({
					url: '/pages/me/agreement?type=' + type
				});
			},
			checkThis() {
				if (this.checkRedio) {
					this.checkRedio = false
				} else {
					this.checkRedio = true
				}
			},
			getCode() {

				if (this.form.phone == '') {
					uni.showToast({
						title: '请输入手机号码',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				//手机验证
				if (!(/^1[3456789]\d{9}$/.test(this.form.phone))) {
					uni.showToast({
						title: "手机号码不正确",
						icon: 'none'
					});
					return false;
				}

				var uri = getApp().globalData.url + 'modules/serviceUser/getCode';
				var formData = {
					phone: this.form.phone
				};
				uni.request({
					url: uri,
					data: formData,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success(res) {
						var resData = res.data;
						if (resData.code == "200") {
							uni.navigateTo({
								url: '../login/loginMessage?phone=' + _self.form.phone + '&lx=' + _self
									.lx + '&forgetPwd=' + _self.forgetPwd
							});
						}
					},
					fail: (res) => {

					}
				})

			},

			changeType() {
				this.pwdType = this.pwdType === 'password' ? 'text' : 'password';
				this.seen = !this.seen; //小眼睛的变化
			},
			showThis(type) {
				if (type == 3) {
					this.forgetPwd = 1
					this.isShow = 2;
				} else {
					this.isShow = type;
				}

			},
			forgetpwd() {
				uni.navigateTo({
					url: '../login/forgetpwd'
				});
			},

			register() {
				uni.navigateTo({
					url: '../login/register'
				});
			},
			toIndex: function(e) {
				var _this = this
				if (this.form.phone == '') {
					uni.showToast({
						title: '请输入手机号码',
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				if (!(/^1[3456789]\d{9}$/.test(this.form.phone))) {
					uni.showToast({
						title: "手机号码不正确",
						icon: 'none'
					});
					return false;
				}
				if (this.form.password == '') {
					uni.showToast({
						title: '请输入密码',
						duration: 2000,
						icon: 'none'
					});
					return;
				}

				//密码验证// 密码格式为6-13位，必须有大小写字母和数字组成 
				var pwd = this.form.password;
				var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,13}$/;

				if (!reg.test(pwd) || pwd.length < 6 || pwd.length > 13) {
					uni.showToast({
						title: "密码格式不正确",
						icon: 'none'
					});
					return false;
				}


				if (!_self.checkRedio) {
					uni.showToast({
						title: '请勾选登录协议',
						duration: 2000,
						icon: 'none'
					});
					return;
				}

				var formData = {
					phone: this.form.phone,
					password: this.form.password
				};
				//console.log(formData)
				//使用全局变量中的url
				var uri = getApp().globalData.url + 'modules/serviceUser/loginUser';

				// this.$api.login(formData).then((res) => {
				// 	console.log(res);

				// 	var resData = res;
				// 	if (resData.code == "200") {
				// 		/* 
				// 		 本地数据缓存，缓存用户登录信息
				// 		 */
				// 		uni.setStorage({
				// 			key: 'user',
				// 			data: resData.data,
				// 			success: function() {}
				// 		});

				// 		// #ifdef APP-PLUS

				// 		uni.getPushClientId({
				// 			success: (res) => {
				// 				let push_clientid = res.cid
				// 				console.log('客户端推送标识cid:', push_clientid)
				// 				_this.updateCid(push_clientid, resData.data.id)
				// 			},
				// 			fail(err) {
				// 				console.log(err)
				// 			}
				// 		})
				// 		// #endif
				// 		uni.switchTab({
				// 			url: '/pages/index/index',
				// 		});


				// 	}
				// })
				uni.request({
					url: uri,
					data: formData,
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success(res) {
						var resData = res.data;
						console.log(resData)
						if (resData.code == "200") {
							console.log(resData.data)
							/* 
							 本地数据缓存，缓存用户登录信息
							 */
							uni.setStorage({
								key: 'user',
								data: resData.data,
								success: function() {}
							});

							
							uni.switchTab({
								url: '/pages/index/index',
							});


						} else {
							//消息提示框
							uni.showToast({
								title: resData.msg,
								duration: 2000,
								icon: "none"
							});
							return false;
						}
					},
					fail: (res) => {
						uni.showToast({
							title: res.errMsg,
							duration: 2000,
							icon: "none"
						});
					}
				})
			},
			updateCid(cid, id) {
				var uri = getApp().globalData.url + 'modules/serviceUser/appUpdate';

				var data = {
					id: id,
					cid: cid,
				}
				uni.request({
					url: uri,
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: data,
					success: (res) => {
						var resData = res.data;
						console.log("=============updateCid==================")
						console.log(resData)
						if (resData.code == "200") {


						} else {
							uni.showToast({
								title: resData.msg,
								duration: 2000,
								icon: "none"
							});
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		margin: 0;
		background-color: $page-bg !important;
	}

	.css-theme {
		@include text-color();
		@include base-background();
		@include border-color();
		@include shadow-color();
	}

	.pwd {
		border: none;
	}

	._top_text {
		font-size: 24px;
		font-weight: bold;
		padding-top: 220rpx;
		margin-left: 40rpx;
		margin-bottom: 50rpx;
		letter-spacing: 5rpx;
	}

	.uni-form-item_other {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 50rpx;
	}

	.uni-form-item_other input {
		flex: 1;
		border: none;
		height: 80rpx;
		font-size: 17px;
		font-weight: bold;
		background-color: none;
		border-bottom: 1px solid #f1f1f1;
	}

	.uni-form-item_other_input {
		flex: 1;
		width: 80%;
		border: none;
		height: 80rpx;
		font-size: 17px;
		font-weight: bold;
		background-color: none;
		border-bottom: 1px solid #f1f1f1;
	}

	.uni-form-item_bottom {

		align-items: center;
		justify-content: space-between;
		padding: 0upx 0upx 5upx 30upx;
		margin: 5upx;
		font-size: 13px;
		text-align: left;

	}

	.loginbtn {
		margin: 50rpx;
		margin-top: 25upx;
		background: #18B998;
		color: #fff;
		border-radius: 30px;
		font-size: 16px;
		height: 88rpx;
		line-height: 88rpx;

	}


	.login {
		position: relative;
		height: 100%;
		z-index: 1;

		/* 内容 start */
		&__wrapper {
			padding-top: 400rpx;
			width: 100%;
		}

		/* 切换 start */
		&__mode {
			position: relative;
			margin: 0 auto;
			width: 476rpx;
			height: 77rpx;
			background-color: rgba(255, 255, 255, 0.2);
			backdrop-filter: blur(6rpx);
			-webkit-backdrop-filter: blur(6rpx);
			box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
			border-radius: 39rpx;

			&__item {
				height: 77rpx;
				width: 100%;
				line-height: 77rpx;
				text-align: center;
				font-size: 31rpx;
				color: #FFFFFF;
				letter-spacing: 1em;
				text-indent: 1em;
				z-index: 2;
				transition: all 0.4s;

				&--active {
					font-weight: bold;
					color: #FFFFFF;
				}
			}

			&__slider {
				position: absolute;
				height: inherit;
				width: calc(476rpx / 2);
				border-radius: inherit;
				box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
				z-index: 1;
				transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
			}
		}

		/* 切换 end */

		/* 登录注册信息 start */
		&__info {
			margin: 0 50rpx;
			margin-top: 105rpx;
			padding: 30rpx 51rpx;
			padding-bottom: 0;
			border-radius: 20rpx;
			background-color: rgba(255, 255, 255, 0.2);
			backdrop-filter: blur(6rpx);
			-webkit-backdrop-filter: blur(6rpx);
			border: 2rpx solid rgba(255, 255, 255, 0.1);
			box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);

			&__item {

				&__input {
					margin-top: 59rpx;
					width: 100%;
					height: 77rpx;
					border: 1rpx solid #FFFFFF;
					border-radius: 39rpx;

					&__left-icon {
						width: 10%;
						font-size: 44rpx;
						margin-left: 20rpx;
						color: #FFFFFF;
					}

					&__content {
						width: 80%;
						padding-left: 10rpx;

						&--verify-code {
							width: 56%;
						}

						input {
							font-size: 24rpx;
							color: #FFFFFF;
							// letter-spacing: 0.1em;
						}
					}

					&__right-icon {
						width: 10%;
						font-size: 44rpx;
						margin-right: 20rpx;
						color: #FFFFFF;
					}

					&__right-verify-code {
						width: 34%;
						margin-right: 20rpx;
					}
				}

				&__button {
					margin-top: 75rpx;
					margin-bottom: 39rpx;
					width: 100%;
					height: 77rpx;
					text-align: center;
					font-size: 31rpx;
					font-weight: bold;
					line-height: 77rpx;
					letter-spacing: 1em;
					text-indent: 1em;
					border-radius: 100rpx;
					color: #FFFFFF;
					background-color: rgba(255, 255, 255, 0.2);
					// border: 2rpx solid #FFFFFF;
				}

				&__tips {
					margin: 30rpx 0;
					color: #FFFFFF;
				}
			}
		}

		/* 登录注册信息 end */

		/* 登录方式切换 start */
		&__way {
			margin: 0 auto;
			margin-top: 110rpx;

			&__item {
				&--icon {
					width: 77rpx;
					height: 77rpx;
					font-size: 50rpx;
					border-radius: 100rpx;
					margin-bottom: 18rpx;
					position: relative;
					z-index: 1;

					&::after {
						content: " ";
						position: absolute;
						z-index: -1;
						width: 100%;
						height: 100%;
						left: 0;
						bottom: 0;
						border-radius: inherit;
						opacity: 1;
						transform: scale(1, 1);
						background-size: 100% 100%;
						// background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
					}
				}
			}
		}

		/* 登录方式切换 end */
		/* 内容 end */

	}

	/deep/.input-placeholder {
		font-size: 24rpx;
		color: #E6E6E6;
	}


	.container {
		padding: 20px;
	}

	.category-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
		// flex-direction: row;
		// align-items: center;
		// padding: 10px;
		// border-radius: 8px;
		// cursor: pointer;
		// transition: background-color 0.3s ease;
		// height: 110rpx;
		// text-align: center;
		// padding-top: 40px;
		// float: left;
	}

	.save_btn {
		text-align: right;
		background-color: #18B998;
		color: white;
		width: 90px;
		border-radius: 30px;
		border:none;
		text-align: center;
		height: 36px;
		line-height: 36px;
	}
</style>